<template>
  <div class="home">
    <el-container>
      <el-main :style="defaultHeight">
        <el-header>
          <span class="col-md-1 el-col-offset-2 logo">ZTY</span>
          <span class="el-col-md-offset-11  nav_span">主页</span>
          <span class="nav_span nav_span2">关于</span>
          <span class="nav_span nav_span3"><i class="navi"></i></span>
          <span class="nav_span nav_span3"><i class="navi2"></i></span>
          <span class="nav_span nav_span3"><i class="navi3"></i></span>
          <span class="login" @click="$router.push('/user/login')">登录</span>
        </el-header>
        <div class="col-md-6 el-col-offset-6 main_div">
          <span class="title">人工智能心音检测平台</span>
          <span class="hint">AI Heart Sound Detection Platform</span>
          <button class="btn col-md-3 el-col-offset-4 btn1">了解更多</button>
          <button class="btn col-md-3 el-col-offset-4" @click="$router.push('/user/login')">立即体验</button>
        </div>
      </el-main>
      <el-footer>
        <Copyright></Copyright>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import Copyright from "@/components/copyright";

export default {
  name: 'Home',
  components: {Copyright},
  data() {
    return {
      defaultHeight: {
        height: ""
      }
    };
  },


  methods: {
    //定义方法，获取高度减去头尾
    getHeight() {
      this.defaultHeight.height = window.innerHeight -60 + "px";
    }
  },

  created() {
    //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  /*background-color: rgba(250, 228, 250, 0.99);*/
  color: #333;
  text-align: left;
  margin: 0;
}
.footer {
  height: 60px;
  padding: 0;
  /*background-color: lavender;*/
}
.el-main {
  /*background-color: rgba(232, 216, 213, 0.53);*/
  color: #333;
  padding: 0;
}
.home {
  background-image: url("../assets/home_bg.jpg");
  background-size: cover;
}
.title {
  margin-top: 100px;
  font-size: 50px;
  letter-spacing: 2px;
  color: rgb(245, 246, 248);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  display: block;
  line-height: 50px;
}
.main_div {
  /*background-color: #e16060;*/
  height: 400px;
  text-align: center;
}
.hint {
  color: white;
  margin-top: 14px;
  font-weight: 300;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  letter-spacing: 2px;
  display: block;
}
.btn {
  display: inline-block;
  background-color: rgb(253, 247, 247, 0);
  height: 50px;
  font-size: 16px;
  margin-top: 50px;
  border-radius: 0;
  letter-spacing: 2px;
  color: white;
  font-weight: 300;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  border: 1.5px solid white;
}
.btn:hover {
  color: white;
  background-color: #0751E1;
  border: 1.5px solid #0751E1;
}
.btn1 {
  background-color: #0751E1;
  border-color: #0751E1;
}
.logo {
  display: inline-block;
  /*background-color: #8c94f5;*/
  text-align: center;
  height: 60px;
  line-height: 60px;
  letter-spacing: 1px;
  color: white;
}
.nav_span {
  color: white;
  height: 40px;
  padding: 0;
  line-height: 40px;
  display: inline-block;
  width: 70px;
  text-align: center;
  /*margin-left: 620px;*/
  border-radius: 3px;
  font-size: 14px;
  transition: .3s;
  overflow: hidden;
  margin-top: 10px;
}
.nav_span:hover {
  background-color: rgba(225, 235, 245, 0.55);
}
.nav_span2 {
  margin-left: 10px;
}
.navi {
  display: inline-block;
  /*background-color: lavender;*/
  width: 18px;
  height: 18px;
  background-image: url("../assets/ding.png");
  background-size: cover;
  margin-left: 10px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 11px;
}
.navi2 {
  display: inline-block;
  /*background-color: lavender;*/
  width: 18px;
  height: 18px;
  background-image: url("../assets/QQ.png");
  background-size: cover;
  margin-left: 8px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 11px;
}
.navi3 {
  display: inline-block;
  /*background-color: lavender;*/
  width: 18px;
  height: 18px;
  background-image: url("../assets/weixin.png");
  background-size: cover;
  margin-left: 8px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 11px;
}
.nav_span3 {
  margin-left: 15px;
  height: 40px;
  width: 40px;
}
.login {
  display: inline-block;
  background-color: #0751E1;
  overflow: hidden;
  margin-left: 18px;
  width: 80px;
  line-height: 40px;
  height: 40px;
  text-align: center;
  font-size: 14px;
  border-radius: 20px;
  color: white;
  font-weight: 500;
}
.login:hover {
  background-color: rgba(15, 92, 238, 0.83);
  transition: .3s;
  box-shadow: 1px 1px 5px rgba(51, 51, 51, 0.27);
}
</style>
